<template>
  <section class="news">
    <img class="img" src="@/assets/images/news/image-39.jpg" lazy-load />
    <section class="news-content" v-show="isShow">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          :ref="setRef"
          @click="handelLook(item,index)"
        >
          <img :src="item.img" class="img" />
          <p>{{item.title}}</p>
          <p>{{item.desc}}</p>
          <p>更新日期：{{item.time}}</p>
        </li>
      </ul>
    </section>
    <section v-show="!isShow" class="news-detail">
      <p class="back" @click="handelLook(list[detailIndex],detailIndex)" ref="title">&lt返回</p>
      <component :is="activeName" keep-alive />
    </section>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive, markRaw, nextTick, Ref, computed } from 'vue'
import { useStore } from 'vuex'
import detail1 from './components/detail1.vue'
import detail2 from './components/detail2.vue'
import detail3 from './components/detail3.vue'
import detail4 from './components/detail4.vue'
import detail5 from './components/detail5.vue'
const store = useStore()
let detailIndex = computed(() => store.state.newsIndex)
let isShow = computed(() => store.state.isShow)
const list = reactive([
  {
    img: new URL(`../../assets/images/news/image-43.jpg`, import.meta.url).href,
    title: '国际知名手机商家推出虹膜识别手机？',
    desc: '#虹膜识别#技术从出现再到发展至今，虽然虹膜识别技术在安全系数等很多方面拥有很多独一无二的优势...',
    time: '2021-11-19',
    key: markRaw(detail1),
  },
  {
    img: new URL(`../../assets/images/news/image-41.jpg`, import.meta.url).href,
    title: '艾瑞斯受邀参加第三届中韩贸易投资博览会',
    desc: '今年是“中韩文化交流年”启动之年，10月29日，第三届中韩贸易投资博览会开幕式在盐城国际会展中心举行...',
    time: '2021-11-12',
    key: markRaw(detail2),
  },
  {
    img: new URL(`../../assets/images/news/image-40.jpg`, import.meta.url).href,
    title: '艾瑞斯提供最佳工作制及防伪造系统',
    desc: '相互不同的虹膜被误认为是相同的数学概率极低，在10亿人以上的数据中，进行本人身份验证时只需1秒...',
    time: '2021-11-12',
    key: markRaw(detail3),
  },
  {
    img: new URL(`../../assets/images/news/image-44.jpg`, import.meta.url).href,
    title: '2019年艾瑞斯和生物识别类企业进军海外的攻略',
    desc: '艾瑞斯是被韩国互联网振兴院(KISA)认可的虹膜识别企业,是以自主研发虹膜识别算法为基础,并在国内外荣获...',
    time: '2019-03-04',
    key: markRaw(detail4),
  },
  {
    img: new URL(`../../assets/images/news/image-42.jpg`, import.meta.url).href,
    title: '艾瑞斯，和伊朗的TOSAN集团共同进军中东市场',
    desc: '中东地区最大的金融系统构建企业之一TOSAN集团到访了虹膜识别专门企业艾瑞斯（代表 金成贤）...',
    time: '2018-11-08',
    key: markRaw(detail5),
  },
])
let activeName = ref(list[detailIndex.value].key)
const title: Ref<HTMLElement | null> = ref(null)
const handelLook = (item: any, index: number) => {
  store.dispatch('setNewsIndex', index)
  activeName.value = item.key
  if (isShow.value) {
    store.dispatch('setIsShow', false)
  } else {
    store.dispatch('setIsShow', true)
  }
  if (!isShow.value) {
    nextTick(() => {
      ;(title.value as HTMLElement).scrollIntoView({
        behavior: 'smooth',
        block: 'end',
      })
    })
  } else {
    nextTick(() => {
      ;(news.value[index] as HTMLElement).scrollIntoView({
        behavior: 'smooth',
        block: 'end',
      })
    })
  }
}
const news = ref([])
const setRef = (el) => {
  ;(news.value as any).push(el)
}
</script>

<style lang="scss" scoped>
.news {
  margin-bottom: 160px;
  &-content {
    ul {
      li {
        margin-top: 24px;
        padding: 24px;
        box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.15);
        p {
          color: #686868;
          &:first-of-type {
            font-size: 32px;
            font-family: Source Han Sans CN, Source Han Sans CN-Bold;
            font-weight: 700;
            color: #333;
            margin-top: 24px;
          }
          &:nth-of-type(2) {
            line-height: 48px;
            margin: 24px 0;
          }
          &:last-of-type {
            font-size: 24px;
          }
        }
      }
    }
  }
  &-detail {
    padding: 24px 24px 0 24px;
  }
  .back {
    font-size: 28px;
    color: #333;
  }
}
</style>